<template>
  <div class="teach-plan-detail">
    <div class="teach-plan-header">
      <span @click="close(true)">返回</span>
      <div>{{planName}}</div>
      <div class="options">
        <el-popover
          popper-class="cus-popover"
          placement="bottom"
          :width="278"
          trigger="click"
          v-if="examineStatus === 1 || !examineStatus"
        >
          <template #reference>
            <el-button class="options-btn" ref="passBtn">通过</el-button>
          </template>
          <span class="teach-plan-reason">审核意见：</span>
          <CurEditor
            :modelValue="passReason"
            v-model="passReason"
            height="130px"
            class="cus-editor"
            placeholder="请输入意见"
          />
          <div class="teach-plan-pop-option" v-if="!examineStatus">
            <el-button size="mini" type="primary" @click="saveExamineStatus(1)">确定</el-button>
            <el-button size="mini" @click="hiddenPassPop">取消</el-button>
          </div>
        </el-popover>
        <el-popover
          popper-class="cus-popover"
          placement="bottom"
          :width="278"
          trigger="click"
          v-if="examineStatus === 2 || !examineStatus"
        >
          <template #reference>
            <el-button class="options-btn" ref="failBtn">不通过</el-button>
          </template>
          <span class="teach-plan-reason">审核意见：</span>
          <CurEditor
            height="130px"
            v-model="failReason"
            :modelValue="failReason"
            placeholder="请输入意见"
            class="cus-editor"
          />
          <div class="teach-plan-pop-option" v-if="!examineStatus">
            <el-button size="mini" type="primary" @click="saveExamineStatus(2)">确定</el-button>
            <el-button size="mini" @click="hiddenFailPop">取消</el-button>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="teach-plan-content">
      <div class="class-container">
        <div class="page-title">教学计划审核</div>
        <el-button
          type="primary"
          @click="changeContrast"
          class="cus-button"
          v-if="historyEdition > 0"
        >{{isContrast ? '取消对比':'对比历史提交'}}</el-button>
      </div>
      <div class="detail-container" :class="{'is_contrast': isContrast}" v-loading="contentLoading">
        <div class="preview-container is-contrast-preview" v-if="isContrast">
          <div class="is-contrast-header-container">
            <div class="is-contrast-header">
              <span>历史版本</span>
              <el-select size="small" v-model="historyEdition" @change="historyChanged">
                <el-option
                  v-for="(item) in examineInfo.bindVersion - 1"
                  :key="item.id"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div class="is-contrast-header-info">
              <div class="prepare-info-item">
                <span class="item-label">学科:</span>
                <span class="item-value">{{subjectName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">计划名称:</span>
                <span class="item-value">{{planName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">教师:</span>
                <span class="item-value">{{examineInfo.creatorName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">提交时间:</span>
                <span
                  class="item-value"
                >{{ historyClassList && historyClassList.length > 0 ? filterSubmitTime(historyClassList[0].submitTime): ''}}</span>
              </div>
              <div class="prepare-info-item s-item" v-if="examineInfo.type === 2">
                <span class="item-label">小组课:</span>
                <span class="item-value">{{examineInfo.lessonName}} ({{studentList}})</span>
              </div>
              <div class="prepare-info-item s-item" v-else>
                <span class="item-label">一对一:</span>
                <span class="item-value">{{examineInfo.lessonName}}</span>
              </div>
            </div>
          </div>
          <div class="is-contrast-content">
            <div class="plan-class-item" v-for="(item,index) in historyClassList" :key="item.id">
              <PlanData :data="item" :index="index" />
            </div>
          </div>
        </div>
        <div class="preview-container">
          <div class="is-contrast-header-container" v-if="isContrast">
            <div class="is-contrast-header">
              <span>当前提交版本</span>
            </div>
            <div class="is-contrast-header-info">
              <div class="prepare-info-item">
                <span class="item-label">学科:</span>
                <span class="item-value">{{subjectName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">计划名称:</span>
                <span class="item-value">{{planName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">教师:</span>
                <span class="item-value">{{examineInfo.creatorName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">提交时间:</span>
                <span class="item-value">{{examineInfo.modifyTime}}</span>
              </div>
              <div class="prepare-info-item s-item" v-if="examineInfo.type === 2">
                <span class="item-label">小组课:</span>
                <span class="item-value">{{examineInfo.lessonName}} ({{studentList}})</span>
              </div>
              <div class="prepare-info-item s-item" v-else>
                <span class="item-label">一对一:</span>
                <span class="item-value">{{examineInfo.lessonName}}</span>
              </div>
            </div>
          </div>
          <div class="is-contrast-content">
            <div class="plan-class-item" v-for="(item,index) in classList" :key="item.id">
              <PlanData
                :class="item.newly === 1 ? 'class-item-new' : '' "
                :data="item"
                :index="index"
              />
            </div>
          </div>
        </div>
        <div class="detail-info" v-if="!isContrast">
          <div class="prepare-info">
            <div class="prepare-title">
              <span>备课详情</span>
              <img src="/src/assets/one-examine/title-book.png" alt />
            </div>
            <div class="prepare-content">
              <div class="prepare-info-item">
                <span class="item-label">学科:</span>
                <span class="item-value">{{subjectName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">计划名称:</span>
                <span class="item-value">{{planName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">教师:</span>
                <span class="item-value">{{examineInfo.creatorName}}</span>
              </div>
              <div class="prepare-info-item">
                <span class="item-label">提交时间:</span>
                <span class="item-value">{{examineInfo.modifyTime}}</span>
              </div>

              <div class="prepare-info-item" v-if="examineInfo.type === 2">
                <span class="item-label">小组课:</span>
                <span class="item-value" style="color: #333333">{{examineInfo.lessonName}}</span>
                <div class="student-list">{{studentList}}</div>
              </div>
              <div class="prepare-info-item" v-else>
                <span class="item-label">一对一:</span>
                <span class="item-value"></span>
                <div class="student-list">{{examineInfo.lessonName}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { inject, ref } from 'vue'
import { ElMessage } from 'element-plus'
import CurEditor from '../components/cur-editor.vue'
import axios from 'axios'
import PlanData from '@/views/one-prepare/prepare-edit/components/data.vue'
import Moment from 'moment'
export default {
  components: { CurEditor, PlanData },
  props: {
    examineInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
    studentList: {
      type: Array,
      default: () => {
        return []
      },
    },
    examineStatus: {
      type: Number,
      default: 0,
    },
    teachPlanId: {
      type: String,
      default: '',
    },
    comment: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props) {
    let close: any = inject('close')
    let passVisible = ref(false)
    let failVisible = ref(false)
    let passReason = ref(props.comment.passReason)
    let failReason = ref(props.comment.failReason)
    let planName = ref('')
    let subjectName = ref()
    let isContrast = ref(false)
    const classList = ref([])
    let historyEdition = ref(props.examineInfo.bindVersion - 1)
    let historyClassList = ref()
    let passBtn = ref()
    let failBtn = ref()
    let historyEditionList = ref([])
    let contentLoading = ref(false)
    console.log(props.examineInfo)
    /** 获取教学计划下的课次 */
    const getTeachPlanClass = () => {
      console.log(props.examineInfo,11)
      contentLoading.value = true
      axios
        .post('/admin/lessonTimes/queryContent', {
          lessonId: props.examineInfo.type === 1 ? props.examineInfo.contractId : props.examineInfo.lessonId,
        })
        .then((res: any) => {
          if (res.result) {
            classList.value = res.json
            contentLoading.value = false
          }
        })
    }
    getTeachPlanClass()
    /** 保存审核结果 */
    const saveExamineStatus = (status) => {
      axios
        .post(`/admin/lessonTimesAudit/save`, {
          lessonId: props.examineInfo.type === 1? props.examineInfo.contractId : props.examineInfo.lessonId,
          lessonThirdId: props.examineInfo.lessonThirdId,
          version: props.examineInfo.bindVersion,
          status,
          comment: status === 1 ? passReason.value : failReason.value,
        })
        .then((res: any) => {
          if (!res.result) return ElMessage.error(res.msg)
          status === 1
            ? (passVisible.value = false)
            : (failVisible.value = false)
          close(true)
          return ElMessage.success('审核成功')
        })
    }
    /** 获取教学计划详情 */
    const getTeachPlanName = () => {
      axios
        .post(`/admin/teachPlan/queryById`, {
          planId: props.teachPlanId,
        })
        .then((res: any) => {
          planName.value = res.json.planName
          subjectName.value = res.json.subjectName
        })
    }
    const queryHistoryLsit = () => {
      contentLoading.value = true
      axios
        .post('/admin/lessonTimesHis/queryLessonTimesContrast', {
          lessonId: props.examineInfo.type === 1? props.examineInfo.contractId : props.examineInfo.lessonId,
          version: historyEdition.value,
        })
        .then((res: any) => {
          if (res.result) {
            classList.value = res.json.current
            historyClassList.value = res.json.old
          }
        })
        .finally(() => {
          contentLoading.value = false
        })
    }
    const historyChanged = (val) => {
      historyEdition.value = val
      queryHistoryLsit()
    }
    const changeContrast = () => {
      if (isContrast.value) return
      isContrast.value = !isContrast.value
      queryHistoryLsit()
    } 
    getTeachPlanName()
    const hiddenPassPop = () => {
      passBtn.value.click()
    }
    const hiddenFailPop = () => {
      failBtn.value.click()
    }
    const filterSubmitTime = (item) => {
      return Moment(item).format('YYYY-MM-DD HH:mm:ss')
    }
    return {
      close,
      passVisible,
      failVisible,
      classList,
      contentLoading,
      passReason,
      failReason,
      saveExamineStatus,
      planName,
      subjectName,
      isContrast,
      changeContrast,
      historyEdition,
      historyEditionList,
      hiddenPassPop,
      hiddenFailPop,
      failBtn,
      passBtn,
      historyClassList,
      historyChanged,
      filterSubmitTime,
    }
  },
}
</script>

<style scoped lang="scss">
.teach-plan-detail {
  background: #f4f5f9;
  .teach-plan-header {
    width: 100%;
    height: 60px;
    background: #72b22a;
    box-shadow: 0px 0px 3px 0px rgba(45, 113, 183, 0.15);
    display: grid;
    grid-template: auto / 20% 60% 20%;
    > span {
      cursor: pointer;
      margin-left: 70px;
      margin-top: 18px;
      color: #fff;
      font-size: 16px;
    }
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
    }
    .options {
      > .options-btn {
        background: #ffffff;
        border-radius: 18px;
        font-size: 14px;
        color: #72b22a;
        padding: 7px 34px;
        cursor: pointer;
      }
    }
  }
  .teach-plan-content {
    margin: 30px 160px 10px 160px;
    height: calc(100vh - 100px);
    background: #ffffff;
    box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
    border-radius: 6px;
    border: 1px solid #ebf0fc;
    padding: 0 20px;
    .class-container {
      flex: auto;
      border-bottom: 1px solid #dee4f1;
      padding: 15px 0 15px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .page-title {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }
    }
    .detail-container {
      height: calc(100% - 86px);
      display: flex;
      padding-top: 20px;
      .preview-container {
        flex: 1;
        height: 100%;
        border-radius: 6px;
        border: 1px solid #dee4f1;
        overflow: auto;
        .plan-class-item {
          margin-bottom: 20px;
          :deep(.actions) {
            display: none;
            .el-button {
              display: none;
            }
          }
          .class-item-new {
            :deep(.actions) {
              display: block;
              .el-button {
                display: none;
              }
              &::before {
                content: '新增';
                display: block;
                padding: 2px 12px;
                font-weight: 500;
                font-size: 14px;
                color: #f49e1a;
                border-radius: 4px;
                border: 1px solid #f49e1a;
              }
            }
          }
        }
        .is-contrast-header {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #72b22a;
          height: 51px;
          border-radius: 6px 6px 0 0;
          > span {
            font-size: 16px;
            color: #ffffff;
            margin-right: 15px;
          }
        }
        .is-contrast-header-info {
          background: #fef7e8;
          padding: 10px 20px;
          margin-bottom: 15px;
          .prepare-info-item {
            display: inline-block;
            width: 50%;
            margin-bottom: 8px;
            position: relative;
            padding-left: 10px;
            &::after {
              content: '';
              position: absolute;
              left: 0;
              top: 4px;
              bottom: 4px;
              width: 3px;
              background: #f49e1a;
            }
            .item-label {
              font-size: 14px;
              color: #333333;
              font-weight: 500;
              font-family: PingFangSC-Medium, PingFang SC;
            }
            .item-value {
              font-size: 14px;
              color: #333333;
              margin-left: 12px;
              font-weight: 400;
              font-family: PingFangSC-Regular, PingFang SC;
            }
          }
          .s-item {
            width: 100%;
            margin-bottom: 0;
          }
        }
      }
      .is-contrast-preview {
        .is-contrast-header-info {
          background: #f5f9fd;
        }
      }
      .detail-info {
        width: 256px;
        margin-left: 20px;
        overflow-y: auto;
        .prepare-info {
          border-radius: 4px;
          border: 1px solid #72b22a;
          .prepare-title {
            background: #72b22a;
            border-radius: 4px 4px 0px 0px;
            padding: 10px 20px;
            font-size: 18px;
            color: #ffffff;
            position: relative;
            > img {
              height: 77px;
              width: 66px;
              position: absolute;
              top: 0;
              right: 12px;
            }
          }
          .prepare-content {
            padding: 15px 10px 0 10px;
            .prepare-info-item {
              margin-bottom: 10px;
              :nth-child(1) {
                font-size: 14px;
                color: #333333;
              }
              .item-value {
                font-size: 14px;
                color: #666666;
                margin-left: 10px;
              }
              .student-list {
                background: #f5f7fa;
                border-radius: 4px;
                padding: 5px 10px;
                color: #666666;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
    .is_contrast {
      display: grid;
      grid-template: auto / repeat(2, 49.5%);
      grid-gap: 1%;
    }
  }
}
.teach-plan-reason {
  font-size: 14px;
  color: #333333;
}
.cus-editor {
  width: 250px;
  height: 130px;
  margin-top: 10px;
  :deep(.cus__editor) {
    background: #f5f7fa;
  }
}
.teach-plan-pop-option {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  :nth-child(1) {
    margin-right: 10px;
  }
}
</style>
